<template>
  <div class="albumCarousel">
    <swiper :options="swiperOption1">
      <swiper-slide v-for="album in newAlbumList" :key="album.id" style="margin-right: 20px">
        <a href="">
          <img :src="album.picUrl" alt="">
          <span>{{album.name}}</span>
          <span>{{album.company}}</span>
        </a>
      </swiper-slide>
    </swiper>
    <div class="swiper-button-prev swiper-button-black" slot="button-prev"></div>
    <div class="swiper-button-next swiper-button-black" slot="button-next"></div>
  </div>
</template>

<script type="text/ecmascript-6">
  import { swiper, swiperSlide } from 'vue-awesome-swiper'
  export default{
    data() {
      return {
        swiperOption1: {
          slidesPerView: 5,
          slidesPerGroup: 5,
          spaceBetween: 10,
          speed: 800,
          loopFillGroupWithBlank: true,
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
          }
        }
      }
    },
    props: {
      newAlbumList: {
        type: Array
      }
    },
    components: {
      swiper,
      swiperSlide
    }
  }
</script>

<style>
  .albumCarousel{
    position: relative;
    background: #f5f5f5;
    border: 1px solid #fff;
    margin-top: 20px;
  }
  .albumCarousel .swiper-slide{
    width: 124px !important;
    height: 100px;
  }
  .albumCarousel>.swiper-container{
    height: 184px;
    width: 650px;
    z-index: 11;
  }
  .albumCarousel .swiper-wrapper{
    margin-top: 28px;
  }
  .albumCarousel span{
    display: block;
    font-size: 12px;
    width: 118px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #000;
  }
  .albumCarousel .swiper-slide img{
    margin-left: 0;
    width: 118px;
    height: 100px;
  }
  .albumCarousel .swiper-button-prev,.albumCarousel .swiper-button-next{
    width: 30px;
    height: 17px;
  }
  .albumCarousel .swiper-button-prev{
    left: 4px;
  }
  .albumCarousel .swiper-button-next{
    right: 4px;
  }
</style>
